<template>
  <div
    :style="{
      fontSize: fontSize,
      lineHeight: lineHeight,
      height: fullHeight ? '100%' : 'auto'
    }"
    class="auto-textarea-wrapper"
  >
    <pre
      :style="{
        fontSize: fontSize,
        lineHeight: lineHeight,
        minHeight: fullHeight ? '100%' : 'auto'
      }"
      class="auto-textarea-block"
    ><br/>{{temp_value}} </pre>
    <textarea
      ref="vTextarea"
      :autofocus="s_autofocus"
      @keyup="change"
      spellcheck="false"
      :placeholder="placeholder"
      v-model="temp_value"
      :style="{ fontSize: fontSize, lineHeight: lineHeight }"
      class="auto-textarea-input"
      :class="className"
      @keydown.tab="enableTabInputHandle($event)"
    >
    </textarea>
  </div>
</template>

<script>
export default {
  name: 'autoTextarea',
  data() {
    return {
      temp_value: (() => {
        return this.value;
      })(),
      s_autofocus: (() => {
        if (this.autofocus) {
          return 'autofocus';
        } else {
          null;
        }
      })()
    };
  },
  created() {},
  props: {
    enableTabInput: {
      type: Boolean,
      default: true
    },
    tabIndent: {
      type: Number,
      default: 4
    },
    className: {
      type: String,
      default: ''
    },
    fullHeight: {
      type: Boolean,
      default: false
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    border: {
      type: Boolean,
      default: false
    },
    resize: {
      type: Boolean,
      default: false
    },
    onchange: {
      type: Function,
      default: null
    },
    fontSize: {
      type: String,
      default: '14px'
    },
    lineHeight: {
      type: String,
      default: '18px'
    }
  },
  methods: {
    change($event) {
      if (this.onchange) {
        this.onchange(this.temp_value, $event);
      }
    },
    enableTabInputHandle(e) {
      if (this.enableTabInput) {
        e.preventDefault();
        e.returnValue = false;
        let indent = '';
        let indentNum = this.tabIndent;
        while (indentNum > 0) {
          indent += ' ';
          indentNum--;
        }
        if (document.selection) {
        }
        this.temp_value += indent;
        //默认4格
      }
    }
  },
  watch: {
    value: function(val, oldVal) {
      this.temp_value = val;
    },
    temp_value: function(val, oldVal) {
      this.$emit('input', val);
    }
  }
};
</script>
<style lang="scss" scoped>
.auto-textarea-wrapper {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: normal;
  .auto-textarea-block {
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word !important;
    visibility: hidden;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
  }
  .auto-textarea-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
    color: #2c3e50;
    &.no-border {
      outline: 0 none;
      border: none !important;
    }
    &.no-resize {
      resize: none;
    }
  }
}
</style>
